<template>
  <header class="topbar">
    <div class="left-section">
      <button class="menu-toggle" @click="toggleSidebar">
        <i class="iconfont icon-expand" v-if="appStore.sidebarCollapsed"></i>
        <i class="iconfont icon-collapse" v-else></i>
      </button>
      <div class="search-box">
        <!-- <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜索..." /> -->
      </div>
    </div>

    <div class="right-section">
      <!-- 添加暗黑模式切换按钮 -->
      <button class="dark-mode-toggle" @click="appStore.toggleDarkMode">
        <i v-if="appStore.darkMode" class="iconfont icon-sun"></i>
        <i v-else class="iconfont icon-moon"></i>
      </button>

      <div class="notification">
        <i class="iconfont icon-notice"></i>
        <span class="badge">3</span>
      </div>

      <div
        class="user-profile"
        @mouseenter="showDropdown = true"
        @mouseleave="showDropdown = false"
      >
        <img
          src="https://randomuser.me/api/portraits/men/1.jpg"
          alt="用户头像"
        />
        <span>{{ currentUserName }}</span>
        <i class="iconfont icon-arrow-down"></i>

        <!-- 用户下拉菜单 -->
        <div v-if="showDropdown" class="dropdown-menu">
          <div class="menu-list">
            <div class="dropdown-item" @click="handleDropdownClick('profile')">
              <i class="iconfont icon-user"></i>
              <span>我的资料</span>
            </div>
            <div class="dropdown-item" @click="handleDropdownClick('settings')">
              <i class="iconfont icon-settings"></i>
              <span>系统设置</span>
            </div>
            <div class="dropdown-item" @click="handleDropdownClick('messages')">
              <i class="iconfont icon-message"></i>
              <span>我的消息</span>
              <span class="dropdown-badge">5</span>
            </div>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item" @click="handlelogOut">
              <i class="iconfont icon-logout"></i>
              <span>退出登录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useAppStore } from "@/stores/app";
import { vConfirm } from "@/plugins/vConfirm";
import { vToast } from "@/plugins/vToast";
import { getUserInfo } from "@/utils/auth";
const router = useRouter();
const appStore = useAppStore();
const showDropdown = ref(false);

// 获取当前登录用户的用户名
const currentUserName = computed(() => {
  const userInfo = getUserInfo();
  // 如果能获取到用户信息，则显示用户名，否则显示默认值
  return userInfo?.username || '管理员';
});

// 处理下拉菜单项点击
const handleDropdownClick = (action) => {
  showDropdown.value = false;

  // 在实际项目中，这里可以添加具体的操作逻辑
  switch (action) {
    case "profile":
      vToast({ message: "跳转到个人资料页面" });
      break;
    case "settings":
      vToast({ message: "打开系统设置" });
      break;
    case "messages":
      vToast({ message: "查看未读消息" });
      break;
  }
};

// 退出登录逻辑
const handlelogOut = () => {
  vConfirm({
    message: "确定退出吗?",
  })
    .then(() => {
      showDropdown.value = false;
      setTimeout(() => {
        vToast({
          message: "退出成功！",
        });
        setTimeout(() => {
          router.replace('/login');
        }, 500);
      }, 500);
    })
    .catch(() => {});
};

const toggleSidebar = () => {
  if (window.innerWidth <= 768) {
    appStore.toggleMobileSidebar();
  } else {
    appStore.toggleSidebar();
  }
};
</script>

<style lang="less" scoped>
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  height: 70px;
  background: var(--v-background-pure);
  box-shadow: var(--v-shadow);
  z-index: 100;
  position: relative;
  transition: all;
}

.left-section,
.right-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--v-text-lighter);
  transition: color 0.3s;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  border: var(--v-border-color) 1px solid;
  border-radius: 4px;
  background: var(--v-background);
  transition: all 0.3s;
  overflow: hidden;
}

.search-box i {
  position: absolute;
  left: 12px;
  color: #b9b9c3;
  transition: color 0.3s;
}

.dark .search-box i {
  color: #6b7280;
}

.search-box input {
  padding: 10px 15px 10px 40px;
  min-width: 300px;
  border: none;
  background: transparent;
}

.dark .search-box input {
  color: #e5e7eb;
}
.dark .search-box input::placeholder {
  color: #6b7280;
}

.notification {
  position: relative;
  font-size: 20px;
  color: var(--v-text-darker);
  cursor: pointer;
  transition: color 0.3s;
}

.dark .notification {
  color: #d1d5db;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ea5455;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-toggle {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--v-text-darker);
  transition: color 0.3s;
}

.dark .dark-mode-toggle {
  color: #fcd34d;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.user-profile img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.user-profile span {
  font-weight: 500;
  color: var(--v-text-darker);
  transition: color 0.3s;
}

.dark .user-profile span {
  color: #e5e7eb;
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: calc(100%);
  right: -25px;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
  padding-top: 16px;
  .menu-list {
    width: 220px;
    background: var(--v-card-bg);
    border-radius:0 0 8px 8px;
    box-shadow: var(--v-shadow);
    overflow: hidden;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  font-size: 14px;
  color: var(--v-text-default);
  transition: all 0.2s ease;
  position: relative;
}

.dropdown-item:hover {
  background: var(--v-background-hover);
}

.dropdown-item i {
  margin-right: 12px;
  width: 20px;
  text-align: center;
  color: var(--v-text-lighter);
  font-size: 18px;
}

.dropdown-item:hover i {
  color: var(v-theme);
}

.dropdown-badge {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--v-theme);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.dropdown-divider {
  height: 1px;
  background: var(--v-border-color);
  margin: 5px 0;
}
</style>